{% extends "rudiment_index.html" %}
{% load staticfiles %}
{% load tz %}
{% load change %}
{% block breadcrumb %}容器信息展示{% endblock %}

{% block content %}

    <div class="row">
            <div class="well well-sm">
                {% if hostip or hostname %}
                               当前宿主机IP: <span style="color: red;margin-left: 3px"><i>{{ hostip }}</i></span><span style="margin-left: 10px"></span> 当前Hostname: <span style="color: red;margin-left: 3px"><i>{{ hostname }}</i></span>
                {% else %}
                    当前宿主机IP: <span style="color: red;margin-left: 3px"><i>10.64.10.65</i></span><span style="margin-left: 10px"></span> 当前Hostname: <span style="color: red;margin-left: 3px"><i>test</i></span>
                {% endif %}
                &nbsp;&nbsp;&nbsp
            </div>

    </div>

     <div class="row">
        <form class="form form-inline" action="/docker/search_c" method="POST">
             {% csrf_token %}
            <div class="well well-sm">

                宿主机ip:&nbsp;        <input type="text" name="hostip" value="{{ hostip }}" class="form-control  input-sm" size="10" />
                容器名称:&nbsp;        <input type="text" name="c_name" value="{{ c_name }}" class="form-control  input-sm" size="10" />
                <div class="btn-group">
                    <input type="submit" class="btn btn-primary btn-sm" onclick="showLoading()"  value="搜索"/>
                </div>
            </div>
        </form>
    </div>



<div id="a" style="width: 730px;height:300px;margin: 0;padding: 0">
<div class="col-sm-offset-5 col-sm-2" style="margin-bottom: 10px"><span style="color: black"><i></i></span>  </div>

<div id="container" style="height: 100%;margin: 0;padding: 0"></div>


<div id="cpu"  class="{{ cpu }}" style="height: 100%;margin: 0;padding: 0"></div>


<div id="mem" class="{{ mem }}" style="height: 100%;margin: 0;padding: 0"></div>






</div>




<script>
        var mem = $("#mem").attr("class")
        var cpu = $("#cpu").attr("class")
        mems = parseFloat(mem)
        cpus = parseFloat(cpu)
        alert("123123")
        alert(mems)
        alert(cpus)
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        {#$.get("/docker/Ajax_getInfo/?container=10.64.10.65").done(function (data) {#}
        {#    if (data){#}
        {#        alert(data)#}
        {#        var datas = JSON.parse(data);#}
        {#        alert(datas)#}

                option = null;
                option = {
                title : {
                    text: '容器内存/CPU 百分比',
                    subtext: '当前容器宿主机：',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    x : 'center',
                    y : 'bottom',
                    data:['剩余','使用']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true,
                            type: ['pie', 'funnel']
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'内存百分比',
                        type:'pie',
                        radius : [20, 110],
                        center : ['25%', '50%'],
                        roseType : 'radius',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:[
                            {value:100-mems, name:'剩余'},
                            {value:mems, name:'使用'},

                        ]
                    },
                    {
                        name:'CPU 百分比',
                        type:'pie',
                        radius : [20, 110],
                        center : ['75%', '50%'],
                        roseType : 'radius',
                        data:[
                            {value:100-cpus, name:'剩余'},
                            {value:cpus, name:'使用'},

                    ]
                }
            ]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }


</script>
{% endblock %}
